<ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        template="/resources/layout/common-layout.xhtml">

    <ui:define name="head">
    </ui:define>
    <ui:define name="toolbar">
        <h:form prependId="false">
            <p:menubar widgetVar="t">
                <c:forEach items="${courseDatesController.menu.subMenus}" var="subMenu" varStatus="subMenuStatus">
                    <p:submenu label="#{subMenu.text}">
                        <c:forEach items="${subMenu.menuItems}" var="menuItem" varStatus="menuItemStatus">
                            <p:menuitem value="#{menuItem.text}"  url="#{menuItem.url}" />
                        </c:forEach>
                    </p:submenu>
                </c:forEach>
            </p:menubar>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <p:growl id="growl" showDetail="true" showSummary="true" globalOnly="true"/>
        <h:form id="h2" prependId="false">
            <p:panel id="commands">
                <h:panelGrid columns="4">
                    <p:commandButton
                            id="b10"
                            value="#{msgs['btn.add']}"
                            immediate="true"
                            action="#{courseDatesController.onStartConversation}"
                            actionListener="#{courseDatesController.onAddRow}"
                            ajax="true"/>
                    <p:commandButton
                            id="b11"
                            value="#{msgs['btn.refresh']}"
                            actionListener="#{courseDatesController.onRefreshRows}"
                            ajax="true"
                            update="dt1 growl"/>
                    #{" "} #{msgs['prompt.table.actions']}
                </h:panelGrid>
            </p:panel>
        </h:form>
        <h:form id="h1" prependId="false">
            <p:dataTable
                    id="dt1"
                    widgetVar="dt1Var"
                    binding="#{courseDatesController.dataTable}"
                    var="row"
                    value="#{courseDatesController.dataModel.rows}"
                    rows="10"
                    height="500"
                    paginator="true"
                    paginatorAlwaysVisible="true"
                    style="vertical-align:text-top;">

                <p:column sortBy="#{row.object.id}" style="width:5px" headerText="#">
                    <h:outputText value="#{row.object.id}"/>
                </p:column>
                <p:column sortBy="#{row.object.course.title}" style="width:200px" headerText="#{msgs['fld.course.title']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.course.title}"/></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.course.title}"/></f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column sortBy="#{row.object.venue.name}" style="width:200px" headerText="#{msgs['fld.venue']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.venue.name}"/></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.venue.name}"/></f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column sortBy="#{row.object.startDate}" style="width:200px" headerText="#{msgs['fld.start.date']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.startDate}"><f:convertDateTime pattern="yyyy-MM-dd" timeZone="#{courseDatesController.timezone}" type="date" /></h:outputText></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.startDate}"><f:convertDateTime pattern="yyyy-MM-dd" timeZone="#{courseDatesController.timezone}" type="date" /></h:inputText></f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column sortBy="#{row.object.endDate}" style="width:200px" headerText="#{msgs['fld.end.date']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.endDate}"><f:convertDateTime pattern="yyyy-MM-dd" timeZone="#{courseDatesController.timezone}" type="date" /></h:outputText></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.endDate}"><f:convertDateTime pattern="yyyy-MM-dd" timeZone="#{courseDatesController.timezone}" type="date" /></h:inputText></f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column sortBy="#{row.object.startTime}" style="width:200px" headerText="#{msgs['fld.start.time']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.startTime}" ><f:convertDateTime pattern="hh:mm" timeZone="#{courseDatesController.timezone}" type="time" /></h:outputText></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.startTime}"><f:convertDateTime pattern="hh:mm" timeZone="#{courseDatesController.timezone}" type="time" /></h:inputText></f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column sortBy="#{row.object.endTime}" style="width:200px" headerText="#{msgs['fld.end.time']}">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{row.object.endTime}" ><f:convertDateTime pattern="hh:mm" timeZone="#{courseDatesController.timezone}" type="time" /></h:outputText></f:facet>
                        <f:facet name="input"><h:inputText value="#{row.object.endTime}"><f:convertDateTime pattern="hh:mm" timeZone="#{courseDatesController.timezone}" type="time" /></h:inputText></f:facet>
                    </p:cellEditor>
                </p:column>
                <p:column style="width:80px" headerText="Options">
                    <h:commandLink action="#{courseDatesController.onStartConversation}" immediate="true" value="Edit" rendered="#{row.editable}">
                        <f:setPropertyActionListener value="#{row}" target="#{courseDatesController.dataModel.selected}"/>
                        <f:setPropertyActionListener value="false" target="#{courseDatesController.dataModel.selected.readonly}"/>
                    </h:commandLink>#{" "}#{" "}
                    <h:commandLink action="#{courseDatesController.onStartConversation}" immediate="true" value="View">
                        <f:setPropertyActionListener value="#{row}" target="#{courseDatesController.dataModel.selected}"/>
                        <f:setPropertyActionListener value="true" target="#{courseDatesController.dataModel.selected.readonly}"/>
                    </h:commandLink>
                </p:column>
            </p:dataTable>

            <p:dialog
                    id="modifyDialog"
                    header="#{msgs['dlg.training.date']}"
                    widgetVar="modifyDialogVar"
                    resizable="false"
                    width="500"
                    modal="true"
                    showEffect="explode"
                    hideEffect="explode">
                <p:fieldset legend="#{msgs['pnl.fields']}">
                    <h:panelGrid id="modify_display" columns="2" cellpadding="4">

                        <h:outputText value="#{msgs['fld.id']}:"/>
                        <h:panelGroup style="width:100%">
                            <h:outputText value="#{courseDatesController.dataModel.selected.object.id}" style="width:100%"/>
                        </h:panelGroup>

                        <h:outputLabel value="#{msgs['fld.title']}:" for="a03"/>
                        <h:panelGroup>
                            <h:panelGrid columns="2">
                                <h:selectOneMenu
                                        id="a03"
                                        label="#{msgs['fld.course']}"
                                        converter="TrainingCourseConverter"
                                        value="#{courseDatesController.dataModel.selected.object.course}" >
                                    
                                    <f:selectItems value="#{courseDatesController.courses}" var="course" itemLabel="#{course.title}" itemDescription="#{course.title}" itemValue="#{course}"  />
                                </h:selectOneMenu>
                                <p:message for="a03" showSummary="false" showDetail="false" display="icon" />
                            </h:panelGrid>
                        </h:panelGroup>

                        <h:outputLabel value="#{msgs['fld.venue']}:" for="a04"/>
                        <h:panelGroup>
                            <h:panelGrid columns="2">
                                <h:selectOneMenu
                                        id="a04"
                                        label="#{msgs['fld.venue']}"
                                        converter="VenueConverter"
                                        value="#{courseDatesController.dataModel.selected.object.venue}" >
                                    <f:selectItem itemLabel="Select one" itemValue="" />
                                    <f:selectItems value="#{courseDatesController.venues}" var="venue" itemLabel="#{venue.name}" itemDescription="#{venue.name}" itemValue="#{venue}"  />
                                </h:selectOneMenu>
                                <p:message for="a03" showSummary="false" showDetail="false" display="icon" />
                            </h:panelGrid>
                        </h:panelGroup>

                        <h:outputLabel value="#{msgs['fld.start.date']}:" for="a01"/>
                        <h:panelGroup>
                            <h:panelGrid columns="2">
                                <p:calendar
                                        id="a01"
                                        size="55"
                                        required="true"
                                        timeZone="#{courseDatesController.timezone}"
                                        pattern="yyyy-MM-dd"
                                        widgetVar="startDateVar"
                                        onSelectUpdate="a05"
                                        selectListener="#{courseDatesController.onStartDateSelected}"
                                        label="#{msgs['fld.start.date']}"
                                        value="#{courseDatesController.dataModel.selected.object.startDate}"/>
                                <p:message for="a01" showSummary="false" showDetail="false" display="icon" />
                            </h:panelGrid>
                        </h:panelGroup>

                        <h:outputLabel value="#{msgs['fld.end.date']}:" for="a05"/>
                        <h:panelGroup>
                            <h:panelGrid columns="2">
                                <p:calendar
                                        id="a05"
                                        size="55"
                                        required="true"
                                        timeZone="#{courseDatesController.timezone}"
                                        pattern="yyyy-MM-dd"
                                        widgetVar="endDateVar"
                                        label="#{msgs['fld.end.date']}"
                                        value="#{courseDatesController.dataModel.selected.object.endDate}"/>
                                <p:message for="a05" showSummary="false" showDetail="false" display="icon" />
                            </h:panelGrid>
                        </h:panelGroup>

                        <h:outputLabel value="#{msgs['fld.start.time']}:" for="a02"/>
                        <h:panelGroup>
                            <h:panelGrid columns="2">
                                <h:inputText
                                        id="a02"
                                        size="55"
                                        required="true"
                                        label="#{msgs['fld.start.time']}"
                                        value="#{courseDatesController.dataModel.selected.object.startTime}">
                                    <f:convertDateTime pattern="hh:mm" timeZone="#{courseDatesController.timezone}" />
                                </h:inputText>
                                <p:message for="a02" showSummary="false" showDetail="false" display="icon" />
                            </h:panelGrid>
                        </h:panelGroup>

                        <h:outputLabel value="#{msgs['fld.end.time']}:" for="a06"/>
                        <h:panelGroup>
                            <h:panelGrid columns="2">
                                <h:inputText
                                        id="a06"
                                        size="55"
                                        required="true"
                                        label="#{msgs['fld.end.time']}"
                                        value="#{courseDatesController.dataModel.selected.object.endTime}">
                                    <f:convertDateTime pattern="hh:mm" timeZone="#{courseDatesController.timezone}" />
                                </h:inputText>
                                <p:message for="a06" showSummary="false" showDetail="false" display="icon" />
                            </h:panelGrid>
                        </h:panelGroup>
                    </h:panelGrid>
                </p:fieldset>
                <p:fieldset legend="#{msgs['pnl.messages']}">
                    <h:panelGrid id="modify_messages" columns="1">
                        <p:messages id="m1" showDetail="true" showSummary="false" globalOnly="false"  />
                    </h:panelGrid>
                </p:fieldset>
                <h:panelGrid id="modify_buttons" columns="3" cellpadding="4">
                    <p:commandButton
                            id="b1"
                            value="#{msgs['btn.save']}"
                            image="ui-icon ui-icon-disk"
                            actionListener="#{courseDatesController.dataModel.onSave}"
                            ajax="true"
                            oncomplete="onSaveComplete(xhr, status, args)"
                            update="dt1 modify_display modify_messages"
                            />
                    
                    <p:commandButton
                            id="b4"
                            value="#{msgs['btn.delete']}"
                            image="ui-icon ui-icon-minus"
                            actionListener="#{courseDatesController.dataModel.onDeleteRow}"
                            ajax="true"
                            rendered="#{courseDatesController.dataModel.selected.object.id ne null}"
                            oncomplete="onDeleteComplete(xhr, status, args)"
                            update="dt1 modify_display modify_messages"
                            />
                    
                    <p:commandButton
                            id="b3"
                            image="ui-icon ui-icon-close"
                            value="#{msgs['btn.close']}"
                            onclick="modifyDialogVar.hide()"
                            update="dt1 modify_display modify_messages"
                            />
                </h:panelGrid>
            </p:dialog>
        </h:form>

        <script type="text/javascript">

        function onDeleteComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }

        function onSaveComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }

        function onAddComplete(xhr, status, args) {
            if (args.validationFailed) {
                return false;
            }
            if (args.result != null) {
                if (args.result.failed) {
                    return false;
                }
            }
            modifyDialogVar.hide();
            return true;
        }
        </script>
    </ui:define>
</ui:composition>
